<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表(缓存)</title>
    <script src="/webjars/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table {
            text-align: center;
        }

        .clearfix:after {
            content: '\20';
            display: block;
            height: 0;
            clear: both
        }

        .clearfix {
            zoom: 1
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                <h3>学生列表(SpringBoot + MP + Thymeleaf模板 + WebJars)</h3>
            </h3>
        </div>
        <table class="table table-hover table-striped ">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>所在班级</td>
                <td>操作</td>
            </tr>
            <tr th:each="stud : ${list}">
                <td>[[${stud.sid}]]</td>
                <td>[[${stud.sname}]]</td>
                <td>[[${stud.sex}]]</td>
                <td>[[${stud.age}]]</td>
                <td>[[${stud.addr}]]</td>
                <td>[[${stud.cname}]]</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm"
                       th:onclick="updateStudent([[${stud.sid}]],[[${stud.sname}]],[[${stud.sex}]],[[${stud.age}]],[[${stud.addr}]],[[${stud.cid}]])">修改</a>
                    <a th:href="'/student/delStud?id=' + ${stud.sid}"  onclick="return confirm('真的要删除吗？')"
                       class="btn btn-danger btn-sm">删除</a>
                </td>
            </tr>
        </table>

        <div class="modal fade" id="myModal" style="text-align: left;">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="title">添加学生</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" method="post" action="/student/add" name="formSave">
                            <input type="hidden" name="sid" id="sid">
                            <input type="hidden" name="_method" id="_m" value="put"/>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">学生姓名</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="sname" id="sname" placeholder="输入学生姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">学生性别</label>
                                <div class="col-sm-10">
                                    <div class="radio">
                                        <label>
                                            <input type="radio" name="sex" id="sex1" value="男">男
                                        </label>
                                        <label>
                                            <input type="radio" name="sex" id="sex2" value="女">女
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">学生年龄</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="age" id="age" placeholder="输入学生年龄">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">学生住址</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="addr" id="addr" placeholder="输入学生住址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">所在班级</label>
                                <div class="col-sm-10">
                                    <select class="form-control" name="cid" id="cid">
                                        <option th:each="c : ${classes}" th:value="${c.cid}">[[${c.cname}]]</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="save()">保存学生</button>
                    </div>
                </div>
            </div>
        </div>


        <div class="panel-footer  clearfix">
            <button type="button" class="btn btn-default " onclick="addStudent()">添加学生</button>

        </div>

    </div>
</div>
</body>
</html>
<script>
    // 3. 添加学生
    function  addStudent(){
        //3.1 修改对话框标题
        $("#title").html("添加学生")
        //3.2 清空表单数据
        document.formSave.reset();
        //3.3 打开对话框
        $('#myModal').modal('show')
        //3.4 为隐藏域_method赋值为post请求
        $("#_m").val("post")
    }
    //4. 修改学生
    function updateStudent(sid,sname,sex,age,addr,cid){
        //4.1 为表单控件赋值
        $("#sid").val(sid)
        $("#sname").val(sname)
        $("#sex1").prop("checked",sex=='男'?true:false)
        $("#sex2").prop("checked",sex=='女'?true:false)

        $("#age").val(age)
        $("#addr").val(addr)
        $("#cid").val(cid)
        //4.2 修改对话框标题
        $("#title").html("修改学生")
        //4.3 打开对话框
        $('#myModal').modal('show')
        //4.4 为隐藏域_method赋值为post请求
        $("#_m").val("put")
    }
    //5. 保存学生
    function save(){
        //5.1 根据表单隐藏域中sid是否有值,决定是添加还是修改
        let sid = $("#sid").val()
        if(sid){
            document.formSave.action = "/student/update"
        }
        //5.2 提交表单
        document.formSave.submit()

    }
</script>